<template>
	<ul class="todo-list">
		<!-- completed: 完成的类名 -->
		<li :class="{ completed: item.isDone }" v-for="item in showList" :key="item.id">
			<div class="view">
				<input class="toggle" type="checkbox" :checked="item.isDone" @click="changeDone(item.id)" />
				<label>{{ item.name }}</label>
				<button class="destroy" @click="delById(item.id)"></button>
			</div>
		</li>
	</ul>

</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
export default {
	computed: {
		...mapState('todos', ['list']),
		...mapGetters('todos', ['showList'])
	},
	methods: {
		...mapMutations('todos', ['changeDone', 'delById'])
	},
	watch: {
		list: {
			deep: true,
			handler() {
				localStorage.setItem('vuex-todos-hf', JSON.stringify(this.list))
			},
		},
	},

}
</script>
